import { Card, CardBody, CardHeader } from "@heroui/react";

import DefaultLayout from "@/layouts/default";

export default function ChartPage() {
  // Mock data for different charts
  const barChartData = [
    { month: "1月", value: 65 },
    { month: "2月", value: 78 },
    { month: "3月", value: 90 },
    { month: "4月", value: 81 },
    { month: "5月", value: 95 },
    { month: "6月", value: 88 },
  ];

  const lineChartData = [
    { month: "1月", value: 40 },
    { month: "2月", value: 30 },
    { month: "3月", value: 20 },
    { month: "4月", value: 27 },
    { month: "5月", value: 18 },
    { month: "6月", value: 23 },
  ];

  const pieChartData = [
    { name: "完成", value: 75, color: "bg-success" },
    { name: "进行中", value: 15, color: "bg-warning" },
    { name: "未开始", value: 10, color: "bg-default" },
  ];

  return (
    <DefaultLayout>
      <div className="flex flex-col gap-6 py-6">
        {/* Page Title */}
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold">图表展示</h1>
          <p className="text-default-500">数据可视化展示</p>
        </div>

        {/* Chart Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Bar Chart */}
          <Card className="shadow-sm">
            <CardHeader>
              <h3 className="text-md font-semibold">柱状图</h3>
              <p className="text-small text-default-500">月度数据统计</p>
            </CardHeader>
            <CardBody>
              <div className="flex items-end justify-between h-64 gap-2">
                {barChartData.map((item, index) => (
                  <div key={index} className="flex flex-col items-center flex-1">
                    <div className="text-tiny text-default-500 mb-2">{item.month}</div>
                    <div 
                      className="w-full bg-primary rounded-t-lg transition-all duration-500 ease-in-out hover:opacity-80"
                      style={{ height: `${item.value}%` }}
                    ></div>
                    <div className="text-tiny mt-2">{item.value}</div>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          {/* Line Chart */}
          <Card className="shadow-sm">
            <CardHeader>
              <h3 className="text-md font-semibold">折线图</h3>
              <p className="text-small text-default-500">趋势分析</p>
            </CardHeader>
            <CardBody>
              <div className="h-64 relative">
                {/* Simple line chart representation */}
                <div className="absolute inset-0 flex items-end">
                  <div className="w-full h-full relative">
                    {/* Grid lines */}
                    <div className="absolute inset-0 flex flex-col justify-between">
                      {[0, 1, 2, 3, 4].map((i) => (
                        <div key={i} className="border-t border-default-100"></div>
                      ))}
                    </div>
                    
                    {/* Line */}
                    <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                      <polyline
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        points={lineChartData.map((item, index) => 
                          `${(index / (lineChartData.length - 1)) * 100},${100 - item.value}`
                        ).join(' ')}
                        className="text-primary"
                      />
                      {lineChartData.map((item, index) => (
                        <circle
                          key={index}
                          cx={(index / (lineChartData.length - 1)) * 100}
                          cy={100 - item.value}
                          r="2"
                          fill="currentColor"
                          className="text-primary"
                        />
                      ))}
                    </svg>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>

          {/* Pie Chart */}
          <Card className="shadow-sm">
            <CardHeader>
              <h3 className="text-md font-semibold">饼图</h3>
              <p className="text-small text-default-500">任务状态分布</p>
            </CardHeader>
            <CardBody>
              <div className="flex flex-col items-center">
                {/* Pie chart representation */}
                <div className="relative w-48 h-48 rounded-full border-8 border-success flex items-center justify-center">
                  <div className="absolute w-48 h-48 rounded-full border-8 border-warning clip-path-pie-1"></div>
                  <div className="absolute w-48 h-48 rounded-full border-8 border-default clip-path-pie-2"></div>
                  <div className="text-center">
                    <div className="text-2xl font-bold">100%</div>
                    <div className="text-small text-default-500">总计</div>
                  </div>
                </div>
                
                {/* Legend */}
                <div className="flex gap-4 mt-6">
                  {pieChartData.map((item, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <div className={`w-3 h-3 rounded-full ${item.color}`}></div>
                      <span className="text-small">{item.name}: {item.value}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </CardBody>
          </Card>

          {/* Area Chart */}
          <Card className="shadow-sm">
            <CardHeader>
              <h3 className="text-md font-semibold">面积图</h3>
              <p className="text-small text-default-500">累积数据展示</p>
            </CardHeader>
            <CardBody>
              <div className="h-64 relative">
                {/* Simple area chart representation */}
                <div className="absolute inset-0 flex items-end">
                  <div className="w-full h-full relative">
                    {/* Grid lines */}
                    <div className="absolute inset-0 flex flex-col justify-between">
                      {[0, 1, 2, 3, 4].map((i) => (
                        <div key={i} className="border-t border-default-100"></div>
                      ))}
                    </div>
                    
                    {/* Area */}
                    <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                      <polygon
                        fill="currentColor"
                        fillOpacity="0.2"
                        points={`0,100 ${lineChartData.map((item, index) => 
                          `${(index / (lineChartData.length - 1)) * 100},${100 - item.value}`
                        ).join(' ')} 100,100`}
                        className="text-primary"
                      />
                      <polyline
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        points={lineChartData.map((item, index) => 
                          `${(index / (lineChartData.length - 1)) * 100},${100 - item.value}`
                        ).join(' ')}
                        className="text-primary"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>
        </div>
      </div>
    </DefaultLayout>
  );
}